<template>
    <el-container>
        <el-header class="box box-align-center box-pack-between">
            <div class="logo box box-align-center ">
                <el-image class="image box box-align-center box-pack-center"
                    src="https://yhlyy.oss-cn-beijing.aliyuncs.com/22921E04CEFD4E00A415DD90BF0DA800logo.png?Expires=4829622684&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=o3Hx7NOcnJbbSYtRQgtz3VL6S1s%3D">
                </el-image>
            </div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">五育通学院</el-menu-item>
                <el-menu-item index="3">渠道合作</el-menu-item>
                <el-menu-item index="4">关于我们</el-menu-item>
            </el-menu>
            <el-button type="primary" class="free-btn" round>免费试用</el-button>
        </el-header>
        <el-main>
            <el-col class="section1 posr">
                <div class="posa">
                    <h3 class="mb30">劳动教育云线上平台</h3>
                    <span class="title">劳动教育课程,教、学、做、评、展一体化平台</span>
                </div>
            </el-col>
            <el-col class="section2 posr box box-align-center box-pack-center">
                <div class="content box box-tb box-align-center box-pack-between">
                    <h3>超过1000家学校正在使用</h3>
                    <span class="title1">学生用户达到10000以上</span>
                    <span class="title2">劳动教育平台线上免费体验，劳动课程备课、实践打卡、教研组、评分小组等功能全面开放</span>
                    <el-button type="primary">立即试用</el-button>
                </div>
            </el-col>
            <el-col class="section3 posr">
            </el-col>
            <el-col class="section4 posr">
            </el-col>
            <el-col class="section5 posr">
            </el-col>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                labelPosition: 'left',
                loading: false,
                form: {
                    usercode: '',
                    pwd: ''
                },
                rules: {
                    usercode: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }]
                }
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            doselect() {
                this.$api.login.login({
                    usercode: this.form.usercode,
                    pwd: this.form.pwd
                }).then(res => {
                    if (res.result == "success") {
                        this.$router.push({
                            path: '/role',
                            query: {
                                usercode: this.form.usercode
                            }
                        });
                    } else if (res.result == "none") {
                        this.$message.error('无此用户');
                    } else if (res.result == "password_error") {
                        this.$message.error('密码错误');
                    } else if (res.result == "fwdq") {
                        this.$message.error('服务已到期');
                    } else {
                        this.$message.error('无登录权限');
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-header,
    .el-footer {
        background-color: #fff;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-header {
        // height: 80px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .logo {
        width: 190px;
        height: 100%;

        .image {
            // height: 100%;
            display: flex !important;
        }
    }

    .free-btn {
        color: #fff;
        background: linear-gradient(rgb(93, 103, 255) 1.06581e-13%, rgb(60, 72, 253) 100%);
    }

    .free-btn.el-button.is-round {
        border: 1px solid rgb(93, 103, 255);
    }

    .free-btn.is-active,
    .free-btn:active {
        background: rgb(58, 71, 252);
        border: 1px solid rgb(93, 103, 255);
    }

    .free-btn:hover {
        background: rgb(58, 71, 252);
        border: 1px solid rgb(93, 103, 255);
    }


    .posr {
        position: relative;
        height: 534px;

    }

    .section1 {
        background: url("../../../static/image_index/bg1.png") no-repeat center center;
    }

    .section2 {
        background: #fff;

        .content{
            height: 200px;
        }

        h3{
            text-align: left;
            font-family: "Source Han Sans SC";
            font-size: 30px;
            color: rgb(38, 100, 255);
        }

        .title1{
            font-size: 20px;
        }
        .title2{
            font-size: 16px;
        }
    }

    .section3 {
        background: url("../../../static/image_index/bg2.png") no-repeat center center;
    }
    .section4 {
        height: 750px !important;
        background: url("../../../static/image_index/bg3.png") no-repeat 50% 100%;
    }
    .section5 {
        height: 1000px !important;
        background: url("../../../static/image_index/bg4.png") no-repeat center center;
    }



    .posa {
        position: absolute;
        top: 150px;
        left: 150px;
        z-index: 10000;

        h3 {
            text-align: left;
            font-family: "Source Han Sans SC";
            font-size: 35px;
        }

        .title {
            font-size: 25px;
        }

    }


    /deep/ .el-menu--horizontal>.el-menu-item {
        color: #000;
    }

    /deep/ .el-menu--horizontal>.el-menu-item.is-active {
        border-bottom: 3px solid rgb(68, 80, 255);
        color: rgb(68, 80, 255);
    }

    /deep/ .el-menu-item {
        margin: 0 30px !important;
        padding: 0 !important;
        font-weight: blod;
        font-size: 16px;
    }

    /deep/ .el-main {
        padding: 0 !important;
    }
</style>
